<template>
    <div class="wrapper">
        <mt-header title="订阅" mtClass="no-bg" />
        <div class="list">
            <div class="item no-all-border" v-for="(item,index) in channel" :key="index">
                <mt-cell :title="item.name" icon="more">
                    <img slot="icon" class="icon" :src="item.classIcon">
                    <span :class="{'ordered':filterStatus(item.classId)==false}">
                        {{ filterStatus(item.classId)?'订阅':'已订阅' }}
                        <input type="checkbox" name="item" class="checkbox" v-model="orderIds" :value="item.classId"/>
                    </span>
                </mt-cell>
            </div>
        </div>
    </div>
</template>

<script>
import mtHeader from "@/components/Header"
import { mapState, mapActions, mapMutations } from 'vuex'
import { orderClass } from '@/api/api'
import cache from '@/utils/cache'
export default {
    data() {
        return {
            channel: [],
            orderIds: ['1']
        }
    },
    components:{
        mtHeader
    },
    computed: {
        ...mapState('index', [
          'indexPage',
          'indexLocation',
          'indexColumn'
        ])
    },
    activated(){
        this.channel = []
        this.orderIds = ['1']
        this.get_channel()
    },
    watch: {
        orderIds(val) {
            // console.log(val)
        }
    },
    methods: {
        ...mapMutations('index', [
            'set_indexActive',
            'set_indexPage',
            'set_indexLocation',
            'set_indexColumn'
        ]),
        ...mapActions('index', [
            'get_channel_data',
            'get_indexColumn_data'
        ]),
        // 获取所有的栏目数据
        get_channel() {
            this.get_channel_data()
            .then(res => {
                if (res) {
                    this.channel = res;
                    this.$nextTick(()=>{
                        for( var i = 0; i < res.length; i++ ){
                            if(res[i].subFlag == '1'){
                                // 已订阅ID
                                this.orderIds.push(res[i].classId);
                            } 
                        }
                    })
                }
            })
        },
        filterStatus(id){
            if( this.orderIds.indexOf(id) == '-1' ){
                // 已订阅列表不包含当前ID ，当前ID未被订阅
                return true
            }else{
                // 已订阅列表包含当前ID ，当前ID已被订阅
                return false
            }
        }
    },
    beforeRouteLeave(to,from,next){
        // 离开页面之前提交订阅数据 -- 手机物理键返回
        orderClass({classIds:this.orderIds}).then(res => {
            if( res.code == 200 ){
                this.set_indexActive('news_1')
                sessionStorage.setItem('navScrollLeft', 0)
                this.set_indexColumn(res.data)
                next()
            }
        })
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    height:100%;
    .list{
        padding-top:60px;
        height:100%;
        overflow-x: hidden;
        overflow-y: scroll;
        /*解决ios上滑动不流畅*/
        -webkit-overflow-scrolling: touch;
        .item{
            padding:10px 0;
            border-bottom:1px solid #f4f5fa;
            .mint-cell-wrapper{
                border-bottom:0px solid transparent;
            }
        }
        .icon{
            margin-right:15px;
        }
        span{
            display:inline-block;
            width:62px;
            text-align:center;
            padding:5px 0px;
            border:1px solid #5F88FF;
            background:#fff;
            color:#5F88FF;
            font-size:13px;
            border-radius:15px;
            position:relative;
            &.ordered{
                border:1px solid #5F88FF;
                background:#5F88FF;
                color:#fff;
            }
            .checkbox{
                width:100%;
                height:100%;
                display:inline-block;
                position:absolute;
                top:0;
                left:0;
                opacity:0;
            }
        }
    }
}  
</style>